<template>
<div id="body">
    <mt-header title="聊天室"></mt-header>
     <div id="login-container">
         
        <div class="login-title">聊天室</div>
        <div class="login-user-icon">
            <img src="../assets/images/login.png" alt="">
        </div>
        <div>
            <input type="text" id="username" class="login-item login-username" placeholder="请输入聊天昵称" v-model="uname">
        </div>
        <div>
            <mt-button type = 'primary' size = 'normal' @click="login()">登录</mt-button>
        </div>
    </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            uname:'',
            face:''
        }
    },
    methods:{
        login(){
            //console.log(this.uname);
            this.face = Math.floor(Math.random()*99) + '.jpg';
            this.$router.push({path:'/chatroom',query:{uname:this.uname,face:this.face}});

        }
    }

}
</script>
<style scoped>
#body{
    background-color: darkgray;
    height: 667px;
}
#login-container{
    width:285px;
    min-height:400px;
    border-radius: 4px;;
    margin:50px auto 0 auto;
    background-color: #F5F5F5;
    border:1px solid #ccc;
}
#login-container .login-title{
    height: 40px;
    line-height: 40px;
    padding-left:10px;
    border-bottom:1px solid #ddd;
}
#login-container .login-user-icon{
    width:120px;
    height: 120px;
    margin: 50px auto;;
}
#login-container .login-item{
    display: block;
    margin:0 auto 10px auto;
}
#login-container .login-username{
    width:190px;
    height: 30px;
    line-height: 30px;
    padding:0 5px;
    text-align: center;
    border: solid 1px black;
}

</style>